<template>
  <!-- 顶部条 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">医师信息</span>
    <el-button @click="dialogVisible=true" type="primary"
               style="float:right;margin-top:10px;">新增</el-button>
  </div>
  <el-dialog v-model="dialogVisible" :title="dialogTitle"  style="width: 1000px;padding:40px;" :before-close="handleClose" >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师姓名" >
            <el-input placeholder="输入医师姓名" v-model="doctor.username">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师密码">
            <el-input placeholder="输入医师密码" v-model="doctor.password">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师性别">
            <el-input placeholder="输入医师性别" v-model="doctor.gender">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师出生日期">
            <el-date-picker
                style="width: 100%;"
                type="date"
                placeholder="选择出生日期"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                v-model="doctor.birthdate">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师联系电话">
            <el-input placeholder="输入医师联系电话" v-model="doctor.contactnumber">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师婚姻状况">
            <el-input placeholder="输入医师婚姻状况" v-model="doctor.marriagestatus">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师账号">
            <el-input placeholder="输入医师账号" v-model="doctor.accountid">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师证件类型">
            <el-input placeholder="输入医师证件类型" v-model="doctor.idtype">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师证件号码">
            <el-input placeholder="输入医师证件号码" v-model="doctor.idcardnumber">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师通信地址">
            <el-input placeholder="输入医师通信地址" v-model="doctor.communicationaddress">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师电子邮箱">
            <el-input placeholder="输入医师电子邮箱" v-model="doctor.email">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师籍贯">
            <el-input placeholder="输入医师籍贯" v-model="doctor.nativeplace">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师学历">
            <el-input placeholder="输入医师学历" v-model="doctor.educationlevel">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师毕业学校">
            <el-input placeholder="输入医师毕业学校" v-model="doctor.graduateschool">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师工号">
            <el-input placeholder="输入医师工号" v-model="doctor.employeenumber">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师职称">
            <el-input placeholder="输入医师职称" v-model="doctor.professionaltitle">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师职位">
            <el-input placeholder="输入医师职位" v-model="doctor.position">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师状态">
            <el-input placeholder="输入医师状态" v-model="doctor.status">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="医师所属科室">
            <el-select placeholder="请选择医师所属科室"
                       v-model="doctor.departmentId">
              <el-option v-for="item in departmentName"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医师照片">
            <el-input placeholder="输入医师照片" v-model="doctor.photo">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template  #footer>
      <el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="saveDoctor">确定</el-button>
    </template>
  </el-dialog>


  <el-card style="margin: 20px;height: 70px;" >
    <el-form :inline="true">
      <el-form-item label="用户搜索">
        <el-input placeholder="输入医师名" style="width: 220px;"
                  v-model="searchFormData.username" @keydown.enter="loadDoctor"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input placeholder="输入医师工号" style="width: 220px;"
                  v-model="searchFormData.employeenumber" @keydown.enter="loadDoctor"></el-input>
      </el-form-item>
      <el-form-item >

        <el-input placeholder="输入医师职位" style="width: 220px;"
                  v-model="searchFormData.position" @keydown.enter="loadDoctor"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select placeholder="请选择医师所属科室" style="width: 220px;"
        v-model="searchFormData.departmentId">
          <el-option v-for="item in departmentName"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadDoctor">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--  #展示医生信息-->
  <el-card>
  <el-table :data="tableData">
    <el-table-column type="index" label="编号" width="180"></el-table-column>
    <el-table-column align="center" prop="photo" label="照片" width="120"></el-table-column>
    <el-table-column  align="center" prop="username" label="姓名" width="180"></el-table-column>
    <el-table-column align="center" prop="gender" label="性别" width="120" :formatter="formatGender"></el-table-column>
    <el-table-column  align="center" prop="birthdate" label="出生日期" width="120"></el-table-column>
    <el-table-column align="center" prop="contactnumber" label="联系电话" width="120"></el-table-column>
    <el-table-column align="center" prop="marriagestatus" label="婚姻状况" width="120"></el-table-column>
    <el-table-column align="center" prop="accountid" label="账号ID" width="120"></el-table-column>
    <el-table-column align="center" prop="idtype" label="证件类型" width="120"></el-table-column>
    <el-table-column align="center" prop="idcardnumber" label="证件号码" width="120"></el-table-column>
    <el-table-column align="center" prop="communicationaddress" label="通信地址" width="120"></el-table-column>
    <el-table-column align="center" prop="email" label="电子邮箱" width="120"></el-table-column>
    <el-table-column align="center" prop="nativeplace" label="籍贯" width="120"></el-table-column>
    <el-table-column align="center" prop="educationlevel" label="学历" width="120"></el-table-column>
    <el-table-column align="center" prop="graduateschool" label="毕业学校" width="120"></el-table-column>
    <el-table-column align="center" prop="employeenumber" label="工号" width="120"></el-table-column>
    <el-table-column align="center" prop="professionaltitle" label="职称" width="120"></el-table-column>
    <el-table-column align="center" prop="position" label="职位" width="120"></el-table-column>
    <el-table-column align="center" prop="status" label="状态" width="120"></el-table-column>
    <el-table-column align="center" prop="departmentId" label="所属科室" width="120" :formatter="departmentOne"></el-table-column>
    <el-table-column align="center" label="操作" width="120">
      <template #default="scope">
        <el-button type="primary" size="small" link @click="editDoctor(scope.row.id)">编辑</el-button>
        <el-button type="primary" size="small" link @click="deleteDoctor(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-card>
</template>
<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
const dialogVisible = ref(false);
const searchFormData=ref({employeenumber:'',username:'',departmentName:'',position:''});
const doctor = ref({
  username:'',
  password:'',
  gender:'',
  contactnumber:'',
  birthdate:'',
  marriagestatus:'',
  idtype:'',
  accountid:'',
  idcardnumber:'',
  communicationaddress:'',
  email:'',
  nativeplace:'',
  educationlevel:'',
  graduateschool:'',
  professionaltitle:'',
  position:'',
  status:'',
  departmentId:'',
  photo:'',
  employeenumber:''
});
const tableData = ref([]);
const dialogTitle = ref("新增医师信息");
const loadDoctor = ()=>{
  console.log("加载医生信息:tableData={}",tableData);
 let data= qs.stringify(searchFormData.value);
 console.log("查询医师信息:data={}",data);
  axios.get(BASE_URL+'v1/doctor/select?'+data).then((response)=>{
    if (response.data.code == 2000){
      tableData.value = response.data.data;
      searchFormData.value={};
    }else {
      ElMessage.error(response.data.message);
    }
  })
}
const saveDoctor = ()=>{
  let data = qs.stringify(doctor.value);
  console.log("保存医师信息:doctor={}",doctor);
  axios.post(BASE_URL+'v1/doctor/save',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('保存成功！');
          dialogVisible.value = false;
          doctor.value = {};
          loadDoctor();

        }else {
          ElMessage.error(response.data.message);
        }
      })
}
const deleteDoctor = (doctorId)=>{
  if (confirm('确定删除该医师信息吗？')){
    axios.post(BASE_URL+'v1/doctor/delete/'+doctorId).then((response)=>{
      if (response.data.code == 2000){
        ElMessage.success('删除成功！');
        loadDoctor();
      }else {
        ElMessage.error(response.data.message);
      }
    })
  }
}
const editDoctor = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑员工';
  axios.get(BASE_URL+'v1/doctor/select?id='+id).then((response)=>{
    if (response.data.code == 2000){
      doctor.value = response.data.data[0];
    }else {
      ElMessage.error(response.data.message);
    }
  })
};
onMounted(()=>{
  loadDoctor();
})
const resetSearch = ()=>{
  searchFormData.value={};
  loadDoctor();
}
const formatGender = (row, column, cellValue, index)=>{
  if (cellValue == 1){
    return "男";
  }else if (cellValue == 2){
    return "女";
  }
  return "未知";
}
const departmentName = ref([
    {value: '1', label: '神经科'},
    {value: '2', label: '呼吸科'},
    {value: '3', label: '消化科'},
    {value: '4', label: '血液科'},
    {value: '5', label: '内分泌科'},
    {value: '6', label: '风湿免疫科'},
    {value: '7', label: '神经外科'}
]);
const departmentMap = {
  '1': '神经科',
  '2': '呼吸科',
  '3': '消化科',
  '4': '血液科',
  '5': '内分泌科',
  '6': '风湿免疫科',
  '7': '神经外科',
};

const departmentOne = (row, column, cellValue, index) => {
  return departmentMap[cellValue] || '未知科室';
};

const handleClose = () =>{
  if (confirm('确定关闭本窗口吗?')){
    dialogVisible.value = false;
    doctor.value = {};
    dialogTitle.value = '新增医师信息';
  }
}
</script>


<style scoped>

</style>